<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <button @click="add('马超')">在最后添加一个--马超</button>
        <button @click="add('孙尚香')">在最后添加一个--孙尚香</button>
        <ul>
            <!-- 
                第一个参数是元素 
                第二个参数是下标
                跟名字无关
            -->
            <li v-for="(item, index) in list" @click="fn2(index)"> {{ item }} ---- {{ index }} </li>

            <!-- 很多时候只是为了拿元素，可能用不到下标 -->
            <!-- <li v-for="item in list">{{ item }}</li> -->
        </ul>

        <!-- 遍历对象 -->
        <h2>以下是遍历对象</h2>
        <ul>
            <!-- 对象的属性有多少个就会产生多少个这样的标签 -->
            <!-- 第一个参数是属性值，第二个是属性名 -->
            <!-- 跟名字无关，也可以简写就只拿属性值 -->
            <li v-for="(val, key) in obj">{{ val }} --- {{ key }}</li>
        </ul>

        <!-- 遍历数字（指定次数的循环） -->
        <h2>以下是指定次数</h2>
        <ul>
            <!-- num是1到9 -->
            <li v-for="num in 9">{{ num }}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: ['刘备','关羽','张飞','赵云','黄忠'],
                obj: {
                    name: 'jack',
                    age: 16,
                    sex: '男'
                }
            },
            methods: {

                add (name) {

                    this.list.push(name)
                },

                fn2 (index) {

                    alert(index)
                }
            }
        })

    </script>
</body>
</html>